<template>
	<view>
		<!--  -->
		<view v-if="modelValue.show" class="yzm_body" @mousemove="touchmove" @mouseup="touchend">
			<view class="zhuti">
				<view
					:class="['msg', msgText==='验证成功' ? 'green' : (['安全验证', '验证中...'].indexOf(msgText)>-1 ? '' : 'red')]">
					{{msgText}}
				</view>
				<view class="title">拖动下方滑块完成拼图</view>
				<view class="movable-area">
					<view id="msg" v-if="zhutuPic === ''">{{msgLoadMsg}}</view>
					<view id="pic" v-else :style="{background: 'url(' + zhutuPic + ') no-repeat 100%/100%'}"></view>
					<view id="line"></view>
					<view :class="['movable-view', {doudong: futu_doudongClass}]"
						:style="{background: 'url(' + futuPic + ') no-repeat top left/100% 338rpx', left: futu_x+'px', transitionDuration: futu_x===10 ? '300ms' : '0ms'}"
						@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @mousedown="touchstart">
					</view>
				</view>
				<view class="close iconfont iconguanbi" @click="modelValue.show = false"></view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		create_yzm_data,
		check_yzm_data,
		get_yzm_image
	} from '@/api/api.js';

	export default {
		emits: ['success'],
		props: {
			modelValue: {
				type: Object,
				default: () => ({
					show: false
				})
			},
		},
		watch: {
			modelValue: {
				handler(newVal, oldVal) {
					console.log(newVal, oldVal, '[123]')
					if (newVal.show === true) {
						this.shuaxin()
					}
				},
				deep: true,
				immediate: true
			},
		},
		data() {
			return {
				zhutuPic: '', //主图
				//缺口图
				futuPic: '',
				futu_x: 10, //默认的位置
				futu_anxiaX: undefined, //按下时，手指的位置
				futu_doudongClass: false,
				//提示信息
				msgText: '安全验证',
				msgLoadMsg: '加载中',
				createdYZMInfo: {},
				errNum: 0,
			}
		},
		mounted() {}, //该组件被挂载到实例上去之后调用
		methods: {
			shuaxin() {
				create_yzm_data().then(res => {
					console.log(res.data, '[res.data]')
					//     var url = this.$yuming + '/xlg_slideCode/yzm_pic.php?class=' + this.modelValue.className + '&session_id=' + this.$session_id + '&time=' + (new Date() * 1)//time参数作用是 避免触发缓存
					for (const key in res.data) {
						this.createdYZMInfo = {
							...this.createdYZMInfo,
							...res.data[key]
						}
					}
					get_yzm_image({
						type: 'zhutu'
					}).then(res => {
						console.log(res, '[zhutu]')
						this.zhutuPic = res.data.image
					})
					get_yzm_image({
						type: 'futu'
					}).then(res => {
						console.log(res, '[futu]')
						this.futuPic = res.data.image
					})
				})
			},

			touchstart(event) { //手指按下
				if (this.futu_anxiaX === undefined && this.futu_x === this.$options.data().futu_x) {
					this.futu_anxiaX = this.$isPc ? event.clientX : event.touches[0].clientX;
				}
			},
			touchmove(event) { //手指移动
				if (this.futu_anxiaX !== undefined) {
					var x = this.$options.data().futu_x + ((this.$isPc ? event.clientX : event.touches[0].clientX) - this
							.futu_anxiaX),
						[min, max] = [0, uni.upx2px(600 - 79)] //确保不会超出边界【600是父元素的宽度、79是自身元素的宽度】
					this.futu_x = x < min ? min : (x > max ? max : x)
				}
			},
			touchend(event) { //手指离开
				if (this.futu_anxiaX !== undefined) {
					this.futu_anxiaX = undefined
					if (this.zhutuPic === '') {
						this.futu_x = this.$options.data().futu_x
					} else {
						this.msgText = '验证中...'
						check_yzm_data({
							x: parseInt(this.futu_x * (679 / uni.upx2px(600)))
						}).then(res => {
							console.log(res, '[]')
							this.$emit('success')
							this.msgText = '验证成功'
							setTimeout(() => {
								this.modelValue.show = false
							}, 300);
						}).catch(err => {
							console.log(err, '[err]') //请控制拼图块对齐缺口
							if (err.statusCode == 500) {
								return uni.showToast({
									title: err.data,
									icon: 'none',
									complete: () => {
										uni.navigateBack(1)
									}
								})
							}
							var errMsg = err
							this.errNum++;
							if (typeof(errMsg) === 'string') {
								this.msgText = errMsg
								//启动抖动动画
								this.futu_doudongClass = true //执行抖动的css动画
								//等待抖动结束
								setTimeout(() => {
									//停止抖动
									this.futu_doudongClass = false
									//回到默认的位置
									this.futu_x = this.$options.data().futu_x
									//重载
									if (this.errNum > 3) {
										this.shuaxin()
										this.errNum = 0;
									}
								}, 700);
								setTimeout(() => {
									this.msgText = '安全验证'
								}, 3500);
							}
						})

					}
				}
			}
		},

	}
</script>
<style lang="scss">
	.yzm_body {
		display: flex;
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		z-index: 1001;
		width: 750rpx;
		height: 100vh;
		justify-content: center;
		align-items: center;

		.zhuti {
			position: relative;
			flex-direction: column;
			background: #fff;
			width: 600rpx;
			padding: 20rpx 25rpx 30rpx 25rpx;
			border-radius: 15rpx;

			.msg {
				color: #999;
				font-size: 24rpx;

				&.red {
					color: red;
				}

				&.green {
					color: green;
				}
			}

			.close {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				color: #a6a6a6;
				font-size: 36rpx;
				padding: 10rpx;
			}

			.title {
				font-size: 28rpx;
				line-height: 38rpx;
				color: #333;
				margin: 0 0 7rpx 0;
			}

			.movable-area {
				position: relative;
				width: 100%;
				height: 415rpx;
				flex-direction: column;

				#msg {
					width: 100%;
					line-height: 338rpx;
					justify-content: center;
					font-size: 30rpx;
					color: #999;
					background: #f8f8f8;
				}

				#pic {
					width: 600rpx;
					height: 338rpx;
				}

				#line {
					background: #e4e4e4;
					height: 20rpx;
					margin: 42rpx 0 15rpx 0;
					border-radius: 50rpx;
				}

				.movable-view {
					position: absolute;
					top: 0;
					left: 0;
					width: 79.63rpx;
					height: 100%;

					&:after {
						position: absolute;
						bottom: 0;
						left: 0;
						content: "";
						box-shadow: rgba(26, 101, 255, 0.52) 0 0 10rpx 1rpx;
						width: 100rpx;
						height: 50rpx;
						border-radius: 50rpx;
						background: rgb(26, 101, 255) url() no-repeat 50% 50% / auto 20rpx;
						margin-left: -10rpx;
					}

					@keyframes doudong {
						20% {
							transform: translateX(-15px);
						}

						40% {
							transform: translateX(15px);
						}

						60% {
							transform: translateX(-15px);
						}

						80% {
							transform: translateX(15px);
						}

						100% {
							transform: translateX(0);
						}
					}

					&.doudong {
						animation: doudong 500ms linear 1;
					}
				}
			}
		}
	}
</style>